<template>
    <div>
        <!-- {{ searchValue }} -->
        <a-input-search style="margin-bottom: 8px" placeholder="请输入关键字" @change="onChange" />
        <a-tree v-if="checkable && treeType=='officeUser'" :checkable="checkable" :show-icon="true" :defaultExpandAll="true" :tree-data="viewData" :selectedKeys.sync="expandedUserKeys" @expand="expanedChange" @check="shareUserCheck">
            <a-icon slot="user" type="user" />
        </a-tree>
        <a-tree v-else :show-icon="true" :defaultExpandAll="defaultExpandAll" :tree-data="viewData" :selectedKeys.sync="localSelectedKeys" @dblclick="dbClick" style="max-height: 450px;overflow-y: auto;">
            <!-- <template slot="title" slot-scope="{ title }">
        <span v-if="title.indexOf(searchValue) > -1">
        
          {{ title.substr(0, title.indexOf(searchValue)) }}
          <span style="color: #f50;margin-right: -0.25rem;">{{ searchValue }}</span>
          {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
        </span>
        <span v-else> {{ title }}</span>
      </template>-->
            <a-icon slot="user" type="user" />
        </a-tree>
    </div>
</template>

<script>
import { searchInTreeData } from "@/utils/tree";

export default {
    props: {
        selectedKeys: {
            type: Array,
            default: () => []
        },
        selectedTitle: {
            type: String,
            default: ""
        },
        checkable: {//是否多选
            type: Boolean,
            default: false
        },
        treeType: {//搜索类型val
            type: String,
            default: ''
        },
        treeData: {
            type: Array,
            default: () => []
        },
        parentUpdateValue: {
            type: Function,
            default: null
        },
        dataList: {
            type: Array,
            default: () => []
        },
        parentKeys: {
            type: Array,
            default: () => []
        },
        keyIncludeObj: {
            type: Object,
            default: null
        },
        defaultExpandAll: {
            type: Boolean,
            default: false
        }
    },
    data () {
        const _this = this;
        return {
            searchValue: "",
            autoExpandParent: true,
            viewData: this.treeData,
            localSelectedKeys: [],
            localSelectedKeysHave: [],

            expandedUserKeys: [],
            shareUserNames: '',
            shareUserId: '',
        };
    },
    created () {
        this.renderTree();
    },
    computed: {

    },
    methods: {
        renderTree () {
            console.log("renderTree....");
            this.localSelectedKeys = this.selectedKeys.slice(0);
        },
        //搜索树
        onChange (e) {
            const value = e.target.value;
            console.log("onChange——value", value, this.treeData);
            if (!value) {
                Object.assign(this, {
                    searchValue: value,
                    viewData: this.treeData
                });
                return false;
            }
            let expandedKeys = new Array();
            //重组tree
            let newTree = searchInTreeData(expandedKeys, this.treeData, "title", value);
            console.log("newTree:", newTree);
            Object.assign(this, {
                searchValue: value,
                autoExpandParent: true,
                viewData: newTree
            });
            console.log(this.treeData);
        },
        onSubmit () {
            //更新 props
            console.log("onSubmit", this.localSelectedKeys, this.shareUserId);
            if (this.checkable && this.treeType == 'officeUser') {
                //多选
                let muchPeple = this.shareUserId.split(',');
                let arrayReturn = [];
                muchPeple.forEach(b => {
                    console.log(b + '你好')
                    arrayReturn.push(b + '_user');
                });
                console.log('多选人：', arrayReturn)
                this.$emit("update:selectedKeys", arrayReturn);
            } else {
                //单选
                this.$emit("update:selectedKeys", this.localSelectedKeys);
            }
        },
        dbClick (e) {
            //更新 props
            console.log(
                "dbClick",
                this.localSelectedKeysHave,
            );
            this.$emit("update:selectedKeys", this.localSelectedKeysHave);
            this.parentUpdateValue();
        },



        //用户tree展开
        expanedChange (key, info) {
            this.expandedUserKeys = key;
        },
        shareUserCheck (keys, info) {
            //共享人tree check事件
            this.shareUserNames = "";
            this.shareUserId = "";
            if (info.checkedNodes.length > 0) {
                for (let i = 0; i < info.checkedNodes.length; i++) {
                    const id = info.checkedNodes[i].data.props.id;
                    const name = info.checkedNodes[i].data.props.name;
                    if (id.indexOf("user") != -1) {
                        this.shareUserNames += name + ",";
                        this.shareUserId += id.split("_")[0] + ",";
                    }
                }
                this.shareUserNames = this.shareUserNames.slice(
                    0,
                    this.shareUserNames.length - 1
                );
                this.shareUserId = this.shareUserId.slice(
                    0,
                    this.shareUserId.length - 1
                );
            }

            console.log('this.shareUserNames,this.shareUserId:', this.shareUserNames, this.shareUserId)
        },
    },

    watch: {
        localSelectedKeys: function (newVal, oldVal) {
            this.localSelectedKeysHave = newVal && newVal.length != 0 ? newVal : oldVal;
        },
        treeData: function (newVal, oldVal) {
            console.log("1.treeData__", newVal, oldVal);
        },
        viewData: function (newVal, oldVal) {
            console.log("2.treeData__viewData", newVal, oldVal);
        },
        "selectedKeys": function (newVal, oldVal) {
            this.renderTree();
        }
    }
};
</script>
